<template>
  <div>
    <div class="bem1">
      <el-button
        type="text"
        class="bem2"
        @click="register"
        >立即注册</el-button
      >
      <el-button
        type="text"
        class="bem3"
        @click="findPwdDia = true"
        >已有账号，忘记密码？</el-button
      >
    </div>

    <el-dialog title="找回密码" v-model="findPwdDia" width="50%" :before-close="handleClose">
      <div class="findPwd">
        <div>
          <div class="bem4">
            <span>账号：</span>
          </div>
          <div class="bem5" >
            <el-input v-model="form.sid" style="width: 150px"></el-input>
          </div>
        </div>
        <div>
          <div class="bem6" >
            <span>新密码：</span>
          </div>
          <div class="bem7" >
            <el-input v-model="form.password" class="bem10"  type="password"></el-input>
          </div>
        </div>
        <div>
          <div class="bem8" >
            <span>验证：</span>
          </div>
          <div class="bem9">
            <el-input v-model="form.yzm" class="bem11"></el-input>
          </div>
          <div class="bem10" >
            <el-button type="text" class="bem11" size="mini" @click="findPass"
              >获取验证码</el-button
            >
          </div>
        </div>
      </div>
      <span class="dialog-footer">
        <el-button @click="findPwdDia = false">取 消</el-button>
        <el-button type="primary" @click="subs">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script setup>
import axios from 'axios'
import { reactive, ref } from 'vue'
import router from '@/router'
import { ElMessage } from 'element-plus'
import '@/assets/scss/userCom/Phone/be.scss'
const findPwdDia = ref(false)
const form = reactive({
  sid: '',
  password: '',
  email: '',
  yzm: ''
})
const reset = () => {
  findPwdDia.value = false
  form = reactive({
    sid: '',
    password: '',
    email: '',
    yzm: ''
  })
}
const register = () => {
  router.push('/RegisterMobile')
}
const findPass = () => {
  if (form.sid !== '') {
    axios.get('/api/user/findPassword_step1/' + form.sid).then((res) => {
      console.log(res.data)
      ElMessage({
        showClose: true,
        message: '获取成功！请及时查看邮箱',
        type: 'success'
      })
    })
  } else {
    ElMessage.error('请正确填写账号或密码！')
  }
}
const subs = () => {
  if (form.sid !== '' && form.password !== '') {
    axios
      .get('/api/user/findPassword_step2/' + form.sid + '/' + form.password + '/' + form.yzm)
      .then((res) => {
        if (res.data !== '') {
          ElMessage({
            type: 'success',
            message: '修改成功!',
            showClose: true
          })
          reset()
        } else {
          ElMessage({
            type: 'error',
            message: '修改失败!',
            showClose: true
          })
        }
      })
  } else {
    ElMessage.error('请正确填写账号或密码！')
  }
}
</script>
<style lang="scss" scoped>
.findPwd {
  width: 100%;
  height: 200px;
  background-color: white;
}
</style>
